<template>
  <div id="inform">
    <div class="suspend">
      <ul>
        <li class="official" @mouseover="msover" @mouseout="msout">
          <i class="icon iconfont icon-qunzu"></i>
          <div class="name">官方Q群</div>
          <div class="QQ" v-show="show">
            <img :src="asideImg" alt="" />
            <p>优租云官方交流群</p>
            <p>群号 ：321336851</p>
          </div>
        </li>
        <a href="/crm/survey">
          <li>
            <i class="icon iconfont">&#xe6d9;</i>
            <div class="name">问卷调查</div>
          </li>
        </a>
        <li class="message" @click="gomessage" >
          <i class="icon iconfont icon-xiaoxi" >
             <span :class="{ active: isActive }" v-if="count"> {{count}}</span>
            </i>
          <div class="name">消息通知</div>
        </li>
        <li class="to-top" @click="gotop" id="showtop">
          <i class="icon iconfont icon-huojian"></i>
          <div class="name">返回顶部</div>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  name: 'inform',
  data () {
    return {
      asideImg: require('../assets/images/code.png'),
      show: false,
      isActive: true,
      count: ''
    };
  },
  mounted () {
    let showtop = document.getElementById('showtop');
    window.onscroll = function () {
      let distance =
        document.body.scrollTop || document.documentElement.scrollTop;
      if (distance > 200) {
        showtop.style.display = 'block';
      } else {
        showtop.style.display = 'none';
      }
    };
    this.getmsg();
    setInterval(this.getmsg, 10240);
    this.$bus.$on('informCount', () => {
      this.getmsg();
    });
  },
  methods: {
    msover () {
      this.show = true;
    },
    msout () {
      this.show = false;
    },
    gotop () {
      window.scrollTo(0, 0);
    },
    gomessage () {
      this.$router.push({ name: 'msglist' });
    },
    // 消息通知接口
    getmsg () {
      this.axios
        .get('crm/message/check-new')
        .then(({ data }) => {
          if (data.code === 200) {
            this.count = data.data.count;
          }
        })
        .catch(function (error) {
          console.log(error);
        });
    }
  }
};
</script>

<style lang="scss">
#inform {
  // 用的是之前代码的css
  .suspend {
    position: fixed;
    bottom: 100px;
    right: 20px;
    z-index: 9999;
  }
  .suspend ul li {
    background-color: #656477;
    color: #fff;
    border-bottom: 1px solid #fff;
    padding: 10px;
    text-align: center;
    cursor: pointer;
  }
  .suspend .to-top {
    display: none;
  }
  .suspend ul li i {
    font-size: 30px;
  }
  .suspend ul li:nth-last-child(1) {
    border-bottom: 0;
  }
  .suspend ul li div {
    font-size: 12px;
  }
  .suspend ul li:hover {
    background-color: #e40230;
  }
  .suspend ul .official {
    position: relative;
  }
  .suspend .QQ {
    position: absolute;
    top: 0;
    right: 68px;
    background-color: #e40230;
    padding: 10px;
    color: #fff;
    font-size: 12px;
  }
  .suspend .QQ img {
    width: 110px;
    height: 110px;
  }
  @-webkit-keyframes animation {
    0% {
      -webkit-transform: rotateZ(60deg);
    }
    50% {
      -webkit-transform: rotateZ(-60deg);
    }
    100% {
      -webkit-transform: rotateZ(60deg);
    }
  }
  .suspend .message {
    position: relative;
    border-top: 1px solid #fff;
    .icon-xiaoxi {
      position: relative;
      .active {
        position: absolute;
        width: 18px;
        height: 18px;
        background: red;
        border-radius: 50%;
        right: -10px;
        top: 0;
        color: white;
        font-size: 12px;
      }
    }
  }
}
</style>
